<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 10171225
  Date: 2016/2/22
  Time: 16:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>"/>
    <title>文章详细</title>
    <script src="static/javascript/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="plugins/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="plugins/ueditor/ueditor.all.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var articleId = ${article.id};
            var editor = UE.getEditor('container', {
                toolbars: [
                    ['fullscreen', 'undo', 'redo', 'bold','italic','underline','strikethrough','forecolor','justifyleft','justifyright',
                        'justifycenter','justifyjustify','spechars', 'fontfamily','fontsize','emotion']
                ],
                autoHeightEnabled: true,
                focus: false,
                initialFrameWidth: 600,
                initialFrameHeight: 150
            });

            $("#commentSubmit").click(function () {
                if("" == $.trim(editor.getContent())) {
                    alert("评论内容不可以为空！");
                    editor.focus();
                    return false;
                }
                $.ajax({
                    type : 'get',
                    contentType:"application/json;charset=utf-8",
                    url : 'article/comment',
                    dataType : 'json',
                    cache: false,
                    timeout: 5000,
                    async: false,
                    data: {
                        "articleId": encodeURI(articleId),
                        "commentContent": encodeURI(editor.getContent())
                    },
                    success: function(result){
                        alert(result);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert("ajax异常，请联系管理员！");
                    }
                });
                obj=$.ajax({url:"article/show?articleId=" + articleId,async:false});
                $("#main").html(obj.responseText);
            });
        });
    </script>
</head>
<body>
    <div class="row">
        <div>
            <div class="col-xs-3 col-sm-3 col-md-3">
                ${user.userName}[楼主]
            </div>
            <div class="col-xs-9 col-sm-9 col-md-9">
                <h1>${article.title}</h1>
                ${article.content}
            </div>
        </div>
        <div>
            <c:forEach items="${commentLst}" var="comment" varStatus="vs">
                <div class="col-xs-3 col-sm-3 col-md-3">
                        ${comment.userName}
                </div>
                <div class="col-xs-9 col-sm-9 col-md-9">
                    ${comment.content}
                </div>
            </c:forEach>
        </div>
        <div>
            <c:if test="${sessionScope.containsKey('userName')}">
                <div class="col-xs-3 col-sm-3 col-md-3">
                    ${sessionScope.get('userName')}
                </div>
                <div class="col-xs-9 col-sm-9 col-md-9">
                    <script id="container" name="commentContent" type="text/plain">
                    </script>
                    <button name="submit" id="commentSubmit">回复</button>
                </div>
            </c:if>
        </div>
    </div>
</body>
</html>
